<template>
  <div style="height: 100%;width: 100%;overflow: hidden">
    <div style="height: 100%;width: 100%;padding-top: 3rem;overflow: hidden">
      <goods-classify-header
        style="position: relative;top:-3rem"
        ref="classifyHeader"
        :pageTitle="pageTitle"
        :classifyList="classifyList"
        :goodsClassCode="goodsCode">
      </goods-classify-header>

      <div class="outer-box" style="height: 100%;width: 100%;position:relative;top: -3rem;">
        <!--<img style="position:absolute;top:-80px" src="static/image/newClassify.jpg" alt="">-->
        <div class="content-box">
          <div class="tab-left-box">
            <tab-left :titleInfo="secList"
                      :activeIndex=" activeIndex"
                      @changeClassifyIndex="changeClassifyIndex">
            </tab-left>
          </div>

          <div class="goods-list-box">
            <page-content
              v-if="activeSecInfo && activeSecInfo.goodsClassCode"
              :secInfo="activeSecInfo"
              :activeThrCode="activeThrCode">
            </page-content>
          </div>
        </div>
      </div>
    </div>
    <add-cart-animate>
    </add-cart-animate>
  </div>
</template>

<script>
  import GoodsClassifyHeader from './GoodsClassifyHeader/index';
  import AnimateRefresh from '@/real-components/AnimateRefresh';
  import AddCartAnimate from '@/real-components/AddCartAnimate';
  import PageContent from './PageContent'
  import {mapGetters} from 'vuex';
  import TabLeft from '../../real-components/TabLeft'

  export default {
    data() {
      return {
        pageTitle: '分类',
        goodsCode: '',
        activeClassify: null,
        secList: [],
        activeSecInfo: {},
        activeIndex: 0,
        activeThrCode: '',
      }
    },

    components: {GoodsClassifyHeader, TabLeft, PageContent, AddCartAnimate},

    methods: {
      //初始化goodsCode
      async _initGoodsCode() {
        this.goodsCode = this.$route.query.classCode || null;
        var isReturn = this.$store.state.cjy.isReturn;
        if (isReturn) {
          this.goodsCode = await localforage.getItem('goodsClassCode')

        }
      },
      //初始化一级分类列表
      initClassifyInfo() {
        if (!this.classifyList || this.classifyList.length == 0) {
          return
        }

        var goodsCode = this.goodsCode;
        //如果页面没有传入 goodscode 返回空值不执行
        if (!goodsCode) {
          return null;
        }
        //goodscode 所在的分类并初始化相关数据
        var activeClassify = this.currentClassifyList.find(item => {
          return item.goodsClassCode == goodsCode;
        });
        var firClassCode = activeClassify.firClassCode || ''
        var secClassCode = activeClassify.secClassCode || ''
        this.activeThrCode = activeClassify.thrClassCode || ''

        if (activeClassify) {
          this.activeClassify = this.classifyList.find(item => {
            return firClassCode == item.goodsClassCode
          })
          //初始化一级分类标题
          this.pageTitle = this.activeClassify.goodsClassName;
          // 初始化二级分类列表
          this.secList = this.activeClassify.secList
          var activeIndex = this.secList.findIndex((item) => {
            return item.goodsClassCode == secClassCode
          })
          this.activeIndex = activeIndex == -1 ? 0 : activeIndex
          this.activeSecInfo = this.secList[this.activeIndex]
        }
      },
      changeClassifyIndex(index, data) {
        this.activeIndex = index
      }
    },
    computed: {
      // 获取分类列表
      classifyList() {
        return this.$store.getters['cjy/newClassifyData'];
      },
      // 原始分类数据
      currentClassifyList() {
        return this.$store.state.cjy.newClassifyList
      },
    },

    watch: {
      $route() {
        this._initGoodsCode();
        this.initClassifyInfo()
      },

      classifyList(data) {
        this.initClassifyInfo()
      },
      activeIndex(index) {
        this.activeSecInfo = this.secList[index]
      }
    },

    beforeCreate() {
      //获取分类列表
      if (!this.$store.getters['cjy/newClassifyData']) {
        this.$store.dispatch('cjy/queryNewClassifyList');
      }
    },

    async created() {
      await this._initGoodsCode()
      this.initClassifyInfo()
    },
    beforeRouteLeave(to, from, next) {
      var name = from.name;
      this.$store.commit('cjy/SET_RETURN_POS', name);
      next();
    },
  }
</script>

<style scoped>
  .content-box {
    /*opacity: 0.5;*/
    position: relative;
    width: 100%;
    height: 100%;
    padding-left: 22.9%;
  }

  .tab-left-box {
    position: absolute;
    left: 0;
    width: 22.9%;
    height: 100%;
    background: rgb(241, 241, 241);
  }

  .goods-list-box {
    width: 100%;
    height: 100%;
    background: white;
    padding-left: 0.3rem;
    /*opacity: 0.7;*/
  }

</style>
